<!doctype html>
{% load static %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>分类</title>
    <link href="{% static 'css/css.css' %}" rel="stylesheet" type="text/css">
    <script src="{% static 'js/jquery-3.5.0.min.js' %}"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>

<!--头部-->
{% include 'header.html'%}

<div class="fen_wrap" id="fen_wrap">
    <div class="fen_bao">
        {% if menu_name is not None %}
        <div class="fen_wei">当前分类&nbsp;: &nbsp;&nbsp;&nbsp;<b>{{menu_name}}</b></div>
        {% else %}
        <div class="fen_wei">当前查询&nbsp;: &nbsp;&nbsp;&nbsp;<b>{{keyword}}</b></div>
        {% endif %}
        <div class="fen_main">
            <div class="fen_mainleft">
                <div class="fen_hui">
                    {% if sort == 0 %}
                    <a href="javascript:void(0)" onclick="sortPage(0)"><span style="color: red">综合排序</span></a>
                    <a href="javascript:void(0)" onclick="sortPage(1)"><span>价格升序</span></a>
                    <a href="javascript:void(0)" onclick="sortPage(2)"><span>价格降序</span></a>
                    {% endif %}
                    {% if sort == 1 %}
                    <a href="javascript:void(0)" onclick="sortPage(0)"><span>综合排序</span></a>
                    <a href="javascript:void(0)" onclick="sortPage(1)"><span style="color: red">价格升序</span></a>
                    <a href="javascript:void(0)" onclick="sortPage(2)"><span>价格降序</span></a>
                    {% endif %}
                    {% if sort == 2 %}
                    <a href="javascript:void(0)" onclick="sortPage(0)"><span>综合排序</span></a>
                    <a href="javascript:void(0)" onclick="sortPage(1)"><span>价格升序</span></a>
                    <a href="javascript:void(0)" onclick="sortPage(2)"><span style="color: red">价格降序</span></a>
                    {% endif %}
                    <span style="float:right;">共 {{count}} 件商品</span></div>
                <ul>
                    <!--每页15个商品-->
                    {% for goods in goodsList %}
                    <li title="{{goods.goods_title}}" onclick="toGoods('{{goods.id}}')">
                        <img src="{{goods.goods_img}}"/>
                        <div class="fen_jiawrap"><span>￥{{goods.goods_price}}</span></div>
                        <div class="fen_xiang">
                            <p>
                                <script>
                                    title = "{{goods.goods_title}}";
                                    if("{{keyword}}"!=""){
                                        keyword = "{{keyword}}";
                                        keyIndex = title.indexOf(keyword)
                                        title1 = title.substring(0,keyIndex);
                                        title2 = title.substring(keyIndex+keyword.length, title.length)
                                        document.write(title1)
                                        document.write("<span style='color: red'>"+keyword+"</span>")
                                        document.write(title2)
                                    }else{
                                        document.write(title)
                                    }
                                </script>
                            </p>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
                {% if page_total > 1%}
                <div class="page">
                </div>
                {% endif %}
            </div>
            <div class="fen_mainright">
                <div class="tuijian">热门推荐</div>
                <ul>
                </ul>
            </div>
        </div>


    </div>
    <el-backtop></el-backtop>
</div>

{% include 'footer.html'%}
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#fen_wrap',
        data: function() {
            return { visible: false }
        }
    })
</script>
<script>
    window.onload = function () {
        initPage()
        loadRecommendGoods()
    }

    //初始化分页组件
    function initPage() {
        let page_total = "{{page_total}}"
        let page_number = "{{page_number}}"
        $(".page").append("<a href='javascript:void(0)' onclick='resetPage(1)'>首页</a>")
        for (let i = 0; i < page_total; i++) {
            if (page_number == (i + 1)) {
                $(".page").append("<a href='javascript:void(0)' style='background:#ffffff'>" + (i + 1) + "</a>")
            } else {
                $(".page").append("<a href='javascript:void(0)' onclick='resetPage(" + (i + 1) + ")'>" + (i + 1) + "</a>")
            }
        }
        $(".page").append("<a href='javascript:void(0)' onclick='resetPage(" + page_total + ")'>尾页</a>")
    }

    //切换页面
    function resetPage(pageNumber) {
        let menu_id = getQueryVariable("menu_id");
        window.location.href = "/classification.html?menu_id=" + menu_id + "&sort={{sort}}&page_number=" + pageNumber
    }

    //排序加载页面
    function sortPage(sort) {
        let menu_id = getQueryVariable("menu_id");
        window.location.href = "/classification.html?menu_id=" + menu_id + "&sort=" + sort
    }

    //进入详情
    function toGoods(id) {
        window.location.href = "/details.html?goods_id=" + id
    }

    //获取地址栏参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return (false);
    }

    //获取推荐商品
    function loadRecommendGoods() {
        $(".fen_mainright>ul").empty();
        $.get(
            "/getRecommendGoods",
            function (res) {
                if (res.code = 200) {
                    let goodsList = res.data;
                    for (let i = 0; i < goodsList.length; i++) {
                        let goods = goodsList[i];
                        let li = document.createElement("li");
                        li.addEventListener("click", function () {
                            toGoods(goods.id);
                        });
                        let img = document.createElement("img");
                        img.src = goods.goods_img;
                        let div = document.createElement("div");
                        div.className = "fen_jiawrap";
                        let span = document.createElement("span");
                        span.innerHTML = "￥ " + goods.goods_price;
                        div.append(span)
                        li.append(img)
                        li.append(div)
                        $(".fen_mainright>ul").append(li)
                    }
                }
            }
        )
    }
</script>
</html>
